<!DOCTYPE html>
<html>
	{include file="public1/_header" /}
	
	<body>
		<div class="x-nav">
			<span class="layui-breadcrumb">
				<a href="">首页</a>
				<a>
					<cite>设备列表</cite></a>
			</span>
			<a class="layui-btn layui-btn-small" style="float:right" onclick="location.reload()" title="刷新">
				<i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
			</a>
		</div>
		
		<div class="layui-fluid">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md12">
					<div class="layui-card">
						<div class="layui-card-body">
							<blockquote class="layui-elem-quote layui-quote-nm">
								<form class="layui-form layui-col-space5" onsubmit="return false;">
									<div class="layui-input-inline layui-show-xs-block">
										<input class="layui-input" lay-verify="required" placeholder="请输入标题" name="title" id="title">
									</div>
									<div class="layui-input-inline layui-show-xs-block">
										<button class="layui-btn" lay-submit="" lay-filter="sreach">查询</button>
										<button class="layui-btn  layui-btn-primary" onclick="location.reload();return false;">重置</button>
									</div>
								</form>
							</blockquote>
							<table class="layui-hide" id="test" lay-filter="test"></table>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/html" id="toolbarDemo">
				<div class="layui-btn-container">
					<button class="layui-btn layui-btn-sm" lay-event="batchUnbundling">批量解绑设备
					</button>
					<button class="layui-btn layui-btn-sm" lay-event="switch">批量设置开关机时间
					</button>
					<button class="layui-btn layui-btn-sm" lay-event="screen_saver">批量设置屏保
					</button>
					<button class="layui-btn layui-btn-sm" lay-event="templates_h">批量设置横版模板
					</button>
					<button class="layui-btn layui-btn-sm" lay-event="templates_v">批量设置竖版模板
					</button>
					<button class="layui-btn layui-btn-sm" lay-event="countdown">批量设置倒计时
					</button>
					<button class="layui-btn layui-btn-sm" lay-event="updateFaces">更新人脸库
					</button>
				</div>
		</script>
		<script type="text/html" id="barDemo">
			{{#  if(d.class_id > 0){ }}
			<a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="del">解绑</a>
			{{#  } else { }}
			<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="class_info">绑定</a>
			{{#  } }}
			<a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="debug_true">开启调试</a>
			<a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="debug_false">关闭调试</a>
<!--			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="reload">重启</a>-->
<!--			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="out">关机</a>			-->
		</script>
		<script type="text/javascript">
			var url = "__STATIC__/admin/"
			layui.extend({
				notice: 'notice/notice'
			}).use(['util', 'laydate', 'table','form','notice'], function() {
				var table = layui.table;
				var form = layui.form;
				var util = layui.util;
				var notice = layui.notice;
				var dropdown = layui.dropdown;
				var tableIns = table.render({
					id: 'testReload',
					elem: '#test',
					url: "{:url('lists')}",
					method: "POST",
					request: {
						pageName: 'offset', //页码的参数名称，默认：page
						limitName: 'limit' //每页数据量的参数名，默认：limit
					},
					where: {
						user_id: "{$Think.session.admin.id}",
						school_id: "{$Think.session.schoolInfo.id}"
					},
					toolbar: '#toolbarDemo',
					cols: [
						[{
							type: 'checkbox',
							fixed: 'left',
							width: 80
						},{
							field: 'id',
							title: "id",
							sort: true,
							width: 80
						}, {
							field: 'key',
							title: "注册码",
							minWidth:200
						}, {
							field: 'device',
							title: "设备名称",
							templet: function(d) {
								if(!d.device){
									return "<div class='a-hover'>点击设置</div>";
								}else{
									return d.device+"<div class='a-hover'>点击设置</div>";
								}
							},
							edit:true,
							minWidth:100
						}, {
							field: 'class_name',
							title: "绑定班级",
							minWidth:200,
							templet: function(d) {
								if(!d.class_name){
									return "<div class='a-hover'>点击设置</div>";
								}else{
									return d.class_name+"<div class='a-hover'>点击设置</div>";
								}
							},
							event: 'class_info',
						},{
							field: 'start_time',
							title: "开关机时间",
							templet: function(d) {
								if(!d.start_time){
									return "<div class='a-hover'>点击设置</div>";
								}else{
									return d.start_time+"-"+d.end_time+"<div class='a-hover'>点击设置</div>";
								}
							},
							event: 'switch',
							minWidth:100
						},{
							field: 'title',
							title: "屏保名称",
							templet: function(d) {
								if(!d.title){
									return "<div class='a-hover'>点击设置</div>";
								}else{
									if(d.screen_type == 1){
										return "文字:"+d.title+"<div class='a-hover'>点击设置</div>";
									}else{
										return "图片:"+d.title+"<div class='a-hover'>点击设置</div>";
									}
									
								}
							},
							event: 'screen_saver',
							minWidth:100
						},{
							field: 'templates',
							title: "横版布局",
							templet: function(d) {
								
								var str = "";
								if(d.templates.length == 0){
									str +="<div class='a-hover'>点击设置</div>";
								}
								d.templates.forEach(function (item,index) {
									if(item.type == 1){
										str +='<span>'+item.title+'</span> '+"<div class='a-hover'>点击设置</div>";
									}
								});
								
								return str;
								
							},
							event: 'templates_h',
							minWidth:120
						}, {
							field: 'templates',
							title: "竖版布局",
							templet: function(d) {

								var str = "";
								if(d.templates.length == 0){
									str +="<div class='a-hover'>点击设置</div>";
								}
								d.templates.forEach(function (item,index) {
									if(item.type == 2){
										str +='<span>'+item.title+'</span> '+"<div class='a-hover'>点击设置</div>";
									}
								});

								return str;

							},
							event: 'templates_v',
							minWidth:120
						},{
							field: 'countdown_name',
							title: "倒计时",
							templet: function(d) {
								var str = "";
								if(!d.countdown_name){
									str +="<div class='a-hover'>点击设置</div>";
								}else{
									str += d.countdown_name+"<div class='a-hover'>点击设置</div>";
								}
								return str;
							},
							event: 'countdown',
							minWidth:120
						},{
							title: "{:lang('action')}",
							toolbar: '#barDemo',
							minWidth:200
						}]
					],
					page: true
				});

				//头工具栏事件
				table.on('toolbar(test)', function(obj) {
					var checkStatus = table.checkStatus(obj.config.id);
					var data = checkStatus.data;
					
					if (data.length < 1) {
						layer.msg('您最少选择一个选项进行操作');
						return false;
					}
					var ids = [];
					var device_ids = []
					data.forEach(function(item, index) {
						if(item.d_id){
							ids.push(item.d_id)
						}
						device_ids.push(item.id)
					})
					
					switch (obj.event) {
						case 'batchUnbundling':
							parent.layer.confirm('真的要解绑这些设备？', function() {
								$.post("{:url('untyingDevice')}", {
									ids: ids,
								}, function(res) {
									if (res.code == 0) {
										parent.layer.msg('解绑成功', {
											icon: 1,
											time: 300
										}, function() {
											tableIns.reload()
										});
									} else {
										parent.layer.msg(res.msg)
									}
								})
							});

							break;
						case 'switch':
							parent.layer.open({
								title: "设置开关机",
								type: 2,
								area: ['1200px', '750px'],
								content: "{:url('switch_all')}",
								success: function() {
									top.layerFrameConfig.iframeB = {
										info: tableIns,
										ids:ids,
										device_ids:device_ids
									}
								}
							});
						
						break;
						case 'screen_saver':
							parent.layer.open({
								title: "设置屏保",
								type: 2,
								area: ['1200px', '750px'],
								content: "{:url('screen_saver_all')}",
								success: function() {
									top.layerFrameConfig.iframeB = {
										info: tableIns,
										ids:ids,
										device_ids:device_ids
									}
								}
							});
						break;
						case 'templates_h':
							parent.layer.open({
								title: "设置横版模板",
								type: 2,
								area: ['1200px', '750px'],
								content: "{:url('temp_h_all')}",
								success: function() {
									top.layerFrameConfig.iframeB = {
										info: tableIns,
										ids:ids,
										device_ids:device_ids
									}
								}
							});
						break;
						case 'templates_v':
							parent.layer.open({
								title: "设置竖版模板",
								type: 2,
								area: ['1200px', '750px'],
								content: "{:url('temp_v_all')}",
								success: function() {
									top.layerFrameConfig.iframeB = {
										info: tableIns,
										ids:ids,
										device_ids:device_ids
									}
								}
							});
						break;
						case 'exam_mode':
							parent.layer.open({
								title: "设置考试模式",
								type: 2,
								area: ['1200px', '750px'],
								content: "{:url('exam_mode')}",
								success: function() {
									top.layerFrameConfig.iframeB = {
										info: tableIns,
										ids:ids,
										device_ids:device_ids
									}
								}
							});
						break;
						case 'countdown':
							parent.layer.open({
								title: "设置倒计时",
								type: 2,
								area: ['1200px', '750px'],
								content: "{:url('countdown')}",
								success: function() {
									top.layerFrameConfig.iframeB = {
										info: tableIns,
										ids:ids,
										device_ids:device_ids
									}
								}
							});
						break;
						case 'updateFaces':
							var data = {};
								data.device_ids = device_ids;
							$.post("{:url('updateFaces')}",data,function(res){
								if (res.code == 0) {
									parent.layer.msg('同步成功', {
										icon: 1,
										time: 300
									});
								} else {
									parent.layer.msg(res.message)
								}
							})
						break;
					};
				});

				//监听行工具事件
				
				table.on('tool(test)',function(obj){
					var ids = [];
					var device_ids = []
					ids.push(obj.data.d_id)
					device_ids.push(obj.data.id)
					if(obj.event === 'del') {
						parent.layer.confirm('真的要解绑？', function(index) {
							var ids = obj.data.d_id;
							$.post("{:url('untyingDevice')}", {ids:ids}, function(res) {
								if (res.code == 0) {
									parent.layer.msg('解绑成功', {
										icon: 1,
										time: 300
									}, function() {
										tableIns.reload()
									});
								} else {
									parent.layer.msg(res.message)
								}
							})
					
						});
					}else if(obj.event == 'switch'){
						parent.layer.open({
							title: "设置开关机",
							type: 2,
							area: ['1200px', '750px'],
							content: "{:url('switch_all')}",
							success: function() {
								top.layerFrameConfig.iframeB = {
									info: tableIns,
									ids:ids,
									device_ids:device_ids
								}
							}
						});
					}else if(obj.event == 'screen_saver'){
						parent.layer.open({
							title: "设置屏保",
							type: 2,
							area: ['1200px', '750px'],
							content: "{:url('screen_saver_all')}",
							success: function() {
								top.layerFrameConfig.iframeB = {
									info: tableIns,
									ids:ids,
									device_ids:device_ids
								}
							}
						});
					}else if(obj.event == 'templates_h'){
						parent.layer.open({
							title: "设置横版模板",
							type: 2,
							area: ['1200px', '750px'],
							content: "{:url('temp_h_all')}",
							success: function() {
								top.layerFrameConfig.iframeB = {
									info: tableIns,
									ids:ids,
									device_ids:device_ids
								}
							}
						});
					}else if(obj.event == 'templates_v'){
						parent.layer.open({
							title: "设置竖版模板",
							type: 2,
							area: ['1200px', '750px'],
							content: "{:url('temp_v_all')}",
							success: function() {
								top.layerFrameConfig.iframeB = {
									info: tableIns,
									ids:ids,
									device_ids:device_ids
								}
							}
						});
					}else if(obj.event == 'class_info'){
						parent.layer.open({
							title: "绑定班级",
							type: 2,
							area: ['1200px', '750px'],
							content: "{:url('class_info')}",
							success: function() {
								top.layerFrameConfig.iframeB = {
									info: tableIns,
									device_ids:device_ids,
									device_key:obj.data.key
								}
							}
						});
					}else if(obj.event == 'exam_mode'){
						parent.layer.open({
							title: "设置考试模式",
							type: 2,
							area: ['1200px', '750px'],
							content: "{:url('exam_mode')}",
							success: function() {
								top.layerFrameConfig.iframeB = {
									info: tableIns,
									ids:ids,
									device_ids:device_ids
								}
							}
						});
					}else if(obj.event == 'countdown'){
						parent.layer.open({
							title: "设置倒计时",
							type: 2,
							area: ['1200px', '750px'],
							content: "{:url('countdown')}",
							success: function() {
								top.layerFrameConfig.iframeB = {
									info: tableIns,
									ids:ids,
									device_ids:device_ids
								}
							}
						});
					}else if(obj.event == 'debug_true'){
						$.post("{:url('debug_true')}",{ids:ids,device_ids:device_ids},function(res){
							if (res.code == 0) {
								parent.layer.msg('开启成功', {
									icon: 1,
									time: 1000
								});
							} else {
								parent.layer.msg(res.message)
							}
						})
					}else if(obj.event == 'debug_false'){
						var data = obj.data;
						$.post("{:url('debug_false')}",{ids:ids,device_ids:device_ids},function(res){
							if (res.code == 0) {
								parent.layer.msg('关闭成功', {
									icon: 1,
									time: 1000
								});
							} else {
								parent.layer.msg(res.message)
							}
						})
					}





				})
				//监听单元格编辑
				table.on('edit(test)', function(obj) {
					var value = obj.value, //得到修改后的值
						data = obj.data, //得到所在行所有键值
						field = obj.field; //得到字段

					console.log(value,data,field)
						$.post("{:url('editDeviceName')}",data,function(res){
							if(res.code == 0){
								notice.msg('设置成功', {
									icon: 1,
									timeout:1000
								});
							}else{
								notice.msg(res.message, {
									icon: 2
								});
								tableIns.reload()
							}
						})
				});
				//是否显示
				form.on('switch(show)', function(obj){
					var data = {
						id:this.value,
						status:obj.elem.checked?1:0
					}
					$.post("{:url('show')}",data,function(res){
						if(res.status == 1){
							notice.msg('设置成功', {
								icon: 1,
								timeout:1000
							});
						}else{
							notice.msg(res.message, {
								icon: 2
							});
							tableIns.reload()
						}
					})
				});
				//是否置顶
				form.on('switch(istop)', function(obj){
					var data = {
						id:this.value,
						status:obj.elem.checked?1:0
					}
					$.post("{:url('top')}",data,function(res){
						if(res.status == 1){
							notice.msg('设置成功', {
								icon: 1,
								timeout:1000
							});
						}else{
							notice.msg(res.message, {
								icon: 2
							});
							tableIns.reload()
						}
					})
				});
				//搜索
				form.on('submit(sreach)', function(data) {
					//执行重载
					table.reload('testReload', {
							method: "POST",
							request: {
								pageName: 'offset', //页码的参数名称，默认：page
								limitName: 'limit' //每页数据量的参数名，默认：limit
							},
							where: {
								keywords:data.field.title,
							},
					        page: {
					          curr: 1 //重新从第 1 页开始
					        }
					});
					return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
				});
				function sort(obj,tableIns){
					$.post("{:url('sort')}",obj.data,function(res){
						if(res.status == 1){
							if(res.status == 1){
								notice.msg('设置成功', {
									icon: 1,
									timeout:1000
								});
							}else{
								notice.msg(res.message, {
									icon: 2
								});
								tableIns.reload()
							}
						}
					})
				}
			});

		</script>
	</body>
</html>
